<template>
  <a-drawer
    title="自定义筛选字段"
    :visible="visible"
    @close="onClose"
    :width="400"
    :body-style="{
      height: 'calc(100% - 110px)',
      boxSizing: 'border-box',
      overflowY: 'auto',
      paddingBottom: '80px',
    }"
  >
    <a-alert message="拖拽条目进行排序" type="info" closable class="mb-20" />
    <section>
      <draggable
        class="list-group"
        v-model="sortList"
        v-bind="dragOptions"
        item-key="key"
      >
        <template #item="{ element }">
          <li class="list-group-item">
            <a-tooltip placement="top">
              <template #title v-if="element.tips">{{ element.tips }}</template>
              <a-checkbox
                size="large"
                v-model:checked="element.show"
              ></a-checkbox>
              <span class="title">{{ element.name }}</span>
            </a-tooltip>
          </li>
        </template>
      </draggable>
    </section>

    <a-col class="drawer-footer">
      <a-row type="flex" justify="space-between">
        <a-button @click="reset">重置</a-button>
        <span>
          <a-button class="mr-10" @click="onClose">取消</a-button>
          <a-button type="primary" @click="onSubmit">提交</a-button>
        </span>
      </a-row>
    </a-col>
  </a-drawer>
</template>

<script>
import { defineComponent, ref, computed, watch, nextTick } from "vue";
import request from "../../../common/utils/request";
import draggable from "vuedraggable";
import { QuestionCircleOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
export default defineComponent({
  name: "sortList",
  props: {
    visible: {
      default: false,
      type: Boolean,
    },
  },
  components: { draggable, QuestionCircleOutlined },
  setup(props, context) {
    const sortList = ref([]);
    const sorterList = () => {
      request.get("/org", "/workbench/moduleInit").then((res) => {
        sortList.value = res.moduleInit;
      });
    };

    const drag = ref(false);

    const onClose = () => {
      context.emit("cancel");
    };
    const onSubmit = () => {
      request
        .post("/org", "/workbench/moduleSet", { module: sortList.value })
        .then((res) => {
          console.log(res);
          context.emit("succes");
        });
    };
    const reset = () => {
      request
        .get("/org", "/workbench/moduleInit", { autoDefault: "default" })
        .then((res) => {
          message.success("重置成功");
          sorterList();
        });
    };
    const dragOptions = computed(() => {
      return {
        animation: 200,
        group: "description",
        disabled: false,
        ghostClass: "ghost",
      };
    });
    watch(
      () => props.visible,
      (val) => {
        if (val) {
          sorterList();
        }
      }
    );

    return {
      onSubmit,
      onClose,
      drag,
      sortList,
      dragOptions,
      reset,
    };
  },
});
</script>

<style lang="less" scoped>
.list-group {
  min-height: 20px;
}
.list-group-item {
  cursor: move;
  height: 50px;
  display: flex;
  align-items: center;
  border: 1px solid #f4f4f4;
  padding: 20px;
  .title {
    margin-left: 10px;
    font-size: 14px;
  }
}
</style>
